<template>
  <div id="home">

    <div class="margin"></div>
    <el-row class="all-right">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <h1><span style="color:#409EFF">JC</span>Shop</h1>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <el-input v-model="searchText" placeholder="请输入搜索关键词（可以是手机名字或者手机品牌）" style="width: 100%;"
            @keyup.enter.native="handleSearch" prefix-icon="el-icon-search">
          </el-input>
        </div>
      </el-col>
      <el-col :span="1">
        <el-button type="primary" plain @click="handleSearch()">搜 索</el-button>
      </el-col>

      <el-col :span="2">
        <i class="el-icon-shopping-cart-2" @click="drawer = true" type="primary"
          style="width: 60px;font-size: 24px;margin-top: 8px;"></i>
      </el-col>

      <el-col :span="1" style="margin-top: 11px;color:#409EFF;" v-if="!localStorageItem">
        <router-link to="/login">前往登录</router-link>
      </el-col>

      <el-col :span="4" style="margin-top: 11px;cursor: pointer;" v-else>
        当前用户：<span style="color:#409EFF;" @click="openMy()">{{ localStorageItem }}</span>
        <el-button size="mini" @click="loginout()">退出登录</el-button>
      </el-col>


    </el-row>

    <div class="margin"></div>

    <el-drawer title="我的购物车" :visible.sync="drawer" :with-header="true" size="70%" style="font-size: 14px;">
      <ul style="padding: 20px;">
        <li style="font-weight: bold; list-style: none; margin-bottom: 10px;">
          <el-row>
            <el-col :span="1">
              <div class="grid-content bg-purple">
                选择
              </div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content bg-purple">
                编号
              </div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content bg-purple-light">商品图片</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">产品名称</div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple">配置</div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content bg-purple-light">数量</div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content bg-purple">价格</div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light">操作</div>
            </el-col>
          </el-row>
        </li>

        <li v-for="(item, index) in cart" :key="index" style="line-height: 50px; list-style: none;">
          <el-row>
            <el-col :span="1">
              <div class="grid-content bg-purple">
                <el-checkbox v-model="item.checked"></el-checkbox>
              </div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content bg-purple">
                {{ index + 1 }}
              </div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content bg-purple-light">
                <el-image :src="require('@/assets/' + item.pic)" class="image" style="height: 50px;"></el-image>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">{{ item.name }}</div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple">{{ item.parameter }}</div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content bg-purple-light">
                <el-input-number size="mini" style="width: 100px;" v-model="item.quantity" @change="handleChange(item)"
                  :min="1" :max="99" label="描述文字"></el-input-number>
              </div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content bg-purple" style="color: red;">￥{{ item.price }}</div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light">
                <el-button size="mini" type="danger" plain @click="removeItem(item)">移出购物车</el-button>
              </div>
            </el-col>
          </el-row>
        </li>

        <li v-if="cart.length > 0" style="list-style: none; text-align: right;">
          <span>商品数量：<el-tag size="mini">{{ totalQuantity }}</el-tag> 件</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span>总金额：<el-tag type="danger" size="mini">{{ totalPrice }}</el-tag> 元</span><br><br><br>

          <el-tag size="mini" type="success">账户余额：{{ userInfo.wallet }}元</el-tag><br><br>

          <el-button type="success" size="small" @click="pay()">结算订单</el-button>
        </li>

        <li v-else style="list-style: none;">
          <el-empty description="啥也没有"></el-empty>
        </li>


      </ul>
    </el-drawer>

    <el-tabs v-model="activeName" @tab-click="handleTabClick" type="card" style="margin-top: 20px;" class="all-left">
      <el-tab-pane label="首页" name="index" class="el-tabs-h">

        <!-- banner -->
        <el-carousel indicator-position="outside" height="550px">
          <el-carousel-item v-for="item in bannerList" :key="item">
            <el-image :src="item"></el-image>
          </el-carousel-item>
        </el-carousel>

        <h2 style="margin: 20px 0px;text-align: left;margin-left: 16%;"><span style="color:red">| </span>热销产品</h2>

        <!-- 商品列表 -->
        <el-row style="padding: 0 300px;margin-bottom: 20px;">
          <el-col :span="6" v-for="(row, index) in filteredProductList.slice((currentPage - 1) * 8, currentPage * 8)"
            :key="index" style="padding: 5px;">
            <div class="grid-content bg-purple" @click="lookProduct(row)">
              <el-col :span="24">
                <el-card :body-style="{ padding: '0px' }" style="min-height: 390px;" class="cart-s"><br>
                  <!-- <el-tag size="mini" class="tag-left">{{ row.tag }}</el-tag><br> -->
                  <el-tag v-if="row.tag === 'Apple'" class="tag-left">{{ row.tag }}</el-tag>
                  <el-tag v-else-if="row.tag === 'Huawei'" type="success" class="tag-left">{{ row.tag }}</el-tag>
                  <el-tag v-else-if="row.tag === 'Redmi'" type="danger" class="tag-left">{{ row.tag }}</el-tag>
                  <el-image :src="require('@/assets/' + row.pic)" class="image" style="height: 230px;"></el-image>
                  <div style="padding: 10px;">
                    <span style="font-weight: bold;font-size: 18px;">{{ row.name }}</span><br><br>
                    <span style="color: red;font-weight: bold;font-size: 18px;">￥{{ row.price }}</span>
                    <div class="bottom clearfix" style="margin-top: 8px;">
                    </div>
                  </div>
                </el-card>
              </el-col>
            </div>
          </el-col>
        </el-row>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="currentPage" :page-size="8" layout="total, prev, pager, next"
          :total="filteredProductList.length" style="margin-bottom: 20px;">
        </el-pagination>


      </el-tab-pane>
      <el-tab-pane label="华为" name="huawei">

        <h2 style="margin: 20px 0px;text-align: left;margin-left: 16%;"><span style="color:red">| </span>华为专区</h2>

        <!-- Xiaomi -->
        <el-row style="padding: 0 300px;margin-bottom: 20px;">
          <el-col :span="6" v-for="(row, index) in filteredProductList.slice((currentPage - 1) * 8, currentPage * 8)"
            :key="index" style="padding: 5px;">
            <div class="grid-content bg-purple" @click="lookProduct(row)">
              <el-col :span="24">
                <el-card :body-style="{ padding: '0px' }" style="min-height: 390px;" class="cart-s"><br>
                  <!-- <el-tag size="mini" class="tag-left">{{ row.tag }}</el-tag><br> -->
                  <el-tag v-if="row.tag === 'Apple'" class="tag-left">{{ row.tag }}</el-tag>
                  <el-tag v-else-if="row.tag === 'Huawei'" type="success" class="tag-left">{{ row.tag }}</el-tag>
                  <el-tag v-else-if="row.tag === 'Redmi'" type="danger" class="tag-left">{{ row.tag }}</el-tag>
                  <el-image :src="require('@/assets/' + row.pic)" class="image" style="height: 230px;"></el-image>
                  <div style="padding: 10px;">
                    <span style="font-weight: bold;font-size: 18px;">{{ row.name }}</span><br><br>
                    <span style="color: red;font-weight: bold;font-size: 18px;">￥{{ row.price }}</span>
                    <div class="bottom clearfix" style="margin-top: 8px;">
                    </div>
                  </div>
                </el-card>
              </el-col>
            </div>
          </el-col>
        </el-row>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="currentPage" :page-size="8" layout="total, prev, pager, next"
          :total="filteredProductList.length">
        </el-pagination>


      </el-tab-pane>
      <el-tab-pane label="苹果" name="apple">


        <h2 style="margin: 20px 0px;text-align: left;margin-left: 16%;"><span style="color:red">| </span>苹果专区</h2>

        <!-- apple -->
        <el-row style="padding: 0 300px;margin-bottom: 20px;">
          <el-col :span="6" v-for="(row, index) in filteredProductList.slice((currentPage - 1) * 8, currentPage * 8)"
            :key="index" style="padding: 5px;">
            <div class="grid-content bg-purple" @click="lookProduct(row)">
              <el-col :span="24">
                <el-card :body-style="{ padding: '0px' }" style="min-height: 390px;" class="cart-s"><br>
                  <!-- <el-tag size="mini" class="tag-left">{{ row.tag }}</el-tag><br> -->
                  <el-tag v-if="row.tag === 'Apple'" class="tag-left">{{ row.tag }}</el-tag>
                  <el-tag v-else-if="row.tag === 'Huawei'" type="success" class="tag-left">{{ row.tag }}</el-tag>
                  <el-tag v-else-if="row.tag === 'Redmi'" type="danger" class="tag-left">{{ row.tag }}</el-tag>
                  <el-image :src="require('@/assets/' + row.pic)" class="image" style="height: 230px;"></el-image>
                  <div style="padding: 10px;">
                    <span style="font-weight: bold;font-size: 18px;">{{ row.name }}</span><br><br>
                    <span style="color: red;font-weight: bold;font-size: 18px;">￥{{ row.price }}</span>
                    <div class="bottom clearfix" style="margin-top: 8px;">
                    </div>
                  </div>
                </el-card>
              </el-col>
            </div>
          </el-col>
        </el-row>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="currentPage" :page-size="8" layout="total, prev, pager, next"
          :total="filteredProductList.length">
        </el-pagination>

      </el-tab-pane>

      <el-tab-pane label="小米" name="xiaomi">
        <h2 style="margin: 20px 0px;text-align: left;margin-left: 16%;"><span style="color:red">| </span>小米专区</h2>

        <!-- Xiaomi -->
        <el-row style="padding: 0 300px;margin-bottom: 20px;">
          <el-col :span="6" v-for="(row, index) in filteredProductList.slice((currentPage - 1) * 8, currentPage * 8)"
            :key="index" style="padding: 5px;">
            <div class="grid-content bg-purple" @click="lookProduct(row)">
              <el-col :span="24">
                <el-card :body-style="{ padding: '0px' }" style="min-height: 390px;" class="cart-s"><br>
                  <!-- <el-tag size="mini" class="tag-left">{{ row.tag }}</el-tag><br> -->
                  <el-tag v-if="row.tag === 'Apple'" class="tag-left">{{ row.tag }}</el-tag>
                  <el-tag v-else-if="row.tag === 'Huawei'" type="success" class="tag-left">{{ row.tag }}</el-tag>
                  <el-tag v-else-if="row.tag === 'Redmi'" type="danger" class="tag-left">{{ row.tag }}</el-tag>
                  <el-image :src="require('@/assets/' + row.pic)" class="image" style="height: 230px;"></el-image>
                  <div style="padding: 10px;">
                    <span style="font-weight: bold;font-size: 18px;">{{ row.name }}</span><br><br>
                    <span style="color: red;font-weight: bold;font-size: 18px;">￥{{ row.price }}</span>
                    <div class="bottom clearfix" style="margin-top: 8px;">
                    </div>
                  </div>
                </el-card>
              </el-col>
            </div>
          </el-col>
        </el-row>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="currentPage" :page-size="8" layout="total, prev, pager, next"
          :total="filteredProductList.length">
        </el-pagination>


      </el-tab-pane>
    </el-tabs>



    <!-- 商品详情页 -->
    <el-dialog title="商品详情页" :visible.sync="dialogVisible" width="50%" :before-close="closeDialog">
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <div v-for="(row, index) in lookproductList" :key="index">
              <el-image :src="require('@/assets/' + row.pic)" class="image" style="height: 400px;"></el-image><br>
            </div>
          </div>
        </el-col>
        <el-col :span="12" style="text-align: left;">
          <div v-for="(row, index) in lookproductList" :key="index">
            <span style="font-weight: bold;font-size: 24px;">{{ row.name }}</span><br><br><br>
            【现货速发】
            <span style="color: red;font-weight: bold;font-size: 20px;">秒杀价：￥{{ productPrice }}</span>
          </div>
          <br><br>
          <span style="font-size: 16px;;">运行内存：</span>
          <el-radio v-model="radio" label="1" border size="mini" @change="onOptionChange">6G</el-radio>
          <el-radio v-model="radio" label="2" border size="mini" @change="onOptionChange">8G</el-radio>
          <el-radio v-model="radio" label="3" border size="mini" @change="onOptionChange">12G</el-radio><br><br><br>

          <span style="font-size: 16px;">存储空间：</span>
          <el-radio v-model="radio1" label="1" border size="mini" @change="onOptionChange">128G</el-radio>
          <el-radio v-model="radio1" label="2" border size="mini" @change="onOptionChange">256G</el-radio>
          <el-radio v-model="radio1" label="3" border size="mini" @change="onOptionChange">512G</el-radio><br><br><br>

          <span style="font-size: 16px;">机身颜色：</span>
          <el-radio v-model="radio2" label="1" border size="mini" @change="onOptionChange">粉色</el-radio>
          <el-radio v-model="radio2" label="2" border size="mini" @change="onOptionChange">绿色</el-radio>
          <el-radio v-model="radio2" label="3" border size="mini" @change="onOptionChange">红色</el-radio>
          <br><br>
          <br><br><br><br><br>

          <el-button plain @click="addToCart()" style="margin-bottom: 100px;">加入购物车</el-button>

          <div class="grid-content bg-purple-light">
          </div>
        </el-col>
      </el-row>
    </el-dialog>

    <el-footer class="footer">
      <div class="copy-right" @click="openQQ" style="cursor: pointer;">
        © 2023 GIIT 2061200827. All rights reserved.</div>
    </el-footer>

    <router-view />
  </div>
</template>

<script>

export default {
  name: 'home',
  data() {
    return {
      radio: '1',//手机配置参数
      radio1: '1',//手机配置参数
      radio2: '1',//手机配置参数
      radioText: '',//手机配置文字
      radioText1: '',//手机配置文字
      radioText2: '',//手机配置文字
      extraPrice: 0, //存储详情页价格
      num: 1,
      localDate: '',//本地时间
      drawer: false,
      activeName: 'index',//选项卡默认选中
      productList: [],
      cart: [],  //购物车中的产品列表 
      checkedItems: [],  //结算成功的产品
      bannerList: [
        require('@/assets/banner001.png'),
        require('@/assets/banner002.png'),
        require('@/assets/banner003.png'),
      ],
      searchText: '',
      selectedTag: '', //新增的用于存储选择的tag的变量 
      filteredProductList: [],
      dialogVisible: false,//商品详情页是否打开
      lookproductList: [],  //查看商品
      localStorageItem: localStorage.getItem('userinfo'),
      currentPage: 1,

      userInfo: {
        id: '',
        account: '',
        password: '',
        fullname: '',
        sex: '',
        email: '',
        birthday: '',
        address: '',
        wallet: ''
      }, // 存储当前登录用户的信息

    };
  },
  mounted() {
    this.fetchProductList();
  },
  created() {

    //格式化时间
    const date = new Date();
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');

    this.localDate = `${year}-${month}-${day}`;

    this.getUsers();//获取用户信息
    this.fetchProductList();//显示产品列表
    this.onOptionChange();//触发这个方法 不然商品详情页获取不到第一个值
    this.$axios.get("http://localhost:3000/product").then(res => {
      this.productList = res.data
    })
      .catch(error => {
        console.log(error);
      });

    setInterval(() => {
      this.getUsers();
    }, 5000); //5秒刷新一次用户信息

  },

  computed: {
    // 获取数据
    getProduct() {
      this.$axios.get('http://localhost:3000/product')
        .then((res) => {
          const { status, data } = res;
          if (status === 200) {
            this.list = data;
          }
        })
        .catch((err) => {
        })
    },

    // 计算购物车中选中商品的总数量
    totalQuantity() {
      return this.cart
        .filter(item => item.checked) // 过滤选中的商品
        .reduce((total, item) => total + item.quantity, 0); // 使用reduce方法计算总数量
    },

    // 计算购物车中选中商品的总价格
    totalPrice() {
      return this.cart
        .filter(item => item.checked) // 过滤选中的商品
        .reduce((total, item) => total + (item.quantity * item.price), 0) // 使用reduce方法计算总价格
        .toFixed(2); // 将总价格保留两位小数
    },
    productPrice() {
      return parseInt(this.lookproductList[0].price) + this.extraPrice;
    }


  },
  methods: {

    addToCart() {
      if (!localStorage.getItem('userinfo')) {
        this.$message({
          type: 'error',
          message: '没有登录！非法操作！八嘎！'
        });
        this.$router.push("/login");
        return false;
      }

      const product = {
        name: this.lookproductList[0].name,
        price: parseInt(this.lookproductList[0].price) + this.extraPrice,
        pic: this.lookproductList[0].pic,
        quantity: 1,//数量
        parameter: this.radioText + " * " + this.radioText1 + " * " + this.radioText2,
        checked: false //checked:false 不加这个会出现bug
      };

      // 判断购物车中是否已经存在相同的产品
      const isProductExist = this.cart.some(item => item.name === product.name);

      if (isProductExist) {
        this.$message({
          type: 'error',
          message: '这个商品已经在你的购物车中啦！不要再点啦！八嘎！'
        });
      } else {
        this.cart.push(product);

        this.radioText = '';
        this.radioText1 = '';
        this.radioText2 = '';

        this.$message({
          type: 'success',
          message: '添加购物车成功!'
        });
        console.log(this.cart)
      }
    },

    // 根据选择的配置计算价格增加的金额
    onOptionChange() {
      this.extraPrice = 0; // 先重置额外价格

      if (this.radio === '1') {
        this.extraPrice += 0; // 6G 内存增加 0 
        this.radioText = '6GB';
      } else if (this.radio === '2') {
        this.extraPrice += 100; // 8G 内存增加 100 元
        this.radioText = '8GB';
      } else if (this.radio === '3') {
        this.extraPrice += 200; // 16G 内存增加 200 元
        this.radioText = '12GB';
      }

      if (this.radio1 === '1') {
        this.extraPrice += 0; // 128G 存储空间增加 0 元
        this.radioText1 = '128GB';
      } else if (this.radio1 === '2') {
        this.extraPrice += 100; // 128G 存储空间增加 100 元
        this.radioText1 = '256GB';
      } else if (this.radio1 === '3') {
        this.extraPrice += 200; // 512G 存储空间增加 200 元
        this.radioText1 = '512GB';
      }

      if (this.radio2 === '1') {
        this.radioText2 = '粉色';
      } else if (this.radio2 === '2') {
        this.radioText2 = '绿色';
      } else if (this.radio2 === '3') {
        this.radioText2 = '红色';
      }

    },

    handleTabClick(tab) {
      this.activeName = tab.name;
      console.log("activeName === " + this.activeName); // 输出选中的选项卡的name属性值
      this.fetchProductList();
    },

    fetchProductList() {
      this.$axios.get("http://localhost:3000/product").then(res => {
        this.productList = res.data;
        // 对产品列表进行随机排序  
        this.productList.sort(() => Math.random() - 0.5);
        //this.filteredProductList = this.productList;
        if (this.activeName === "apple") {
          console.log(this.activeName);
          this.filteredProductList = this.productList.filter(product => product.tag === "Apple");
        } else
          if (this.activeName === "huawei") {
            console.log(this.activeName);
            this.filteredProductList = this.productList.filter(product => product.tag === "Huawei");
          } else
            if (this.activeName === "xiaomi") {
              console.log(this.activeName);
              this.filteredProductList = this.productList.filter(product => product.tag === "Redmi");
            } else
              this.filteredProductList = this.productList;

      })
        .catch(error => {
          console.log(error);
        })
    },
    handleSearch() {
      const searchTextLowerCase = this.searchText.toLowerCase();//不区分大小写
      this.filteredProductList = this.productList.filter(product => {
        return product.name.toLowerCase().includes(searchTextLowerCase) || product.tag.toLowerCase().includes(searchTextLowerCase);
      });
    },
    //退出登录
    loginout() {
      this.$confirm('您确定要退出登录吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        localStorage.clear();
        this.$router.push("/login");
        this.$message({
          type: 'success',
          message: '退出登录成功!'
        });

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作！'
        });
      });
    },
    openMy() {
      this.$router.push("/my");
    },
    lookProduct(row) {
      this.dialogVisible = true;
      if (!this.lookproductList.length) {
        this.lookproductList.push(row);
      }
    },
    closeDialog() {
      this.dialogVisible = false;
      this.lookproductList = [];
    },
    handleSizeChange(pageSize) {
      // 更新每页显示数量
      this.pageSize = pageSize;
    }, handleCurrentChange(currentPage) {
      // 更新当前页码
      this.currentPage = currentPage;
    },
    handleChange(item) {
      // Handle quantity change
    },
    removeItem(item) {
      this.$confirm('确定将这个商品移出购物车吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        const index = this.cart.indexOf(item);
        if (index > -1) {
          this.cart.splice(index, 1);
        }
        this.$message({
          type: 'success',
          message: '移出成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },
    addSettlement() {
      //将已经结算的产品添加到 db.json
      for (let i = 0; i < this.checkedItems.length; i++) {
        let item = this.checkedItems[i];
        this.$axios.post('http://localhost:3000/order', {
          account: this.userInfo.account,
          name: item.name,
          price: item.price,
          parameter:item.parameter,
          pic: item.pic,
          quantity: item.quantity,
          date: this.localDate//设置时间为电脑当前时间
        })
          .then(res => {
            console.log(res);
            this.checkedItems = [];
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    pay() {
      const wallet = this.userInfo.wallet;
      if (this.cart.some(item => item.checked)) {
        if (this.totalPrice <= wallet) {
          this.$axios.put("http://localhost:3000/users/" + this.userInfo.id, {
            account: this.userInfo.account,
            password: this.userInfo.password,
            fullname: this.userInfo.fullname,
            sex: this.userInfo.sex,
            email: this.userInfo.email,
            birthday: this.userInfo.birthday,
            address: this.userInfo.address,
            wallet: wallet - this.totalPrice
          }).then(response => {

            this.$message({
              type: 'success',
              message: '结算成功，已扣款！'
            });

            this.cart.forEach(item => {
              if (item.checked === true) {
                this.checkedItems.push(item);
              }
            });

            this.addSettlement();

            let newCart = this.cart.filter(item => !item.checked);//filter方法会创建一个新的数组，包含通过测试的元素
            this.cart = newCart;
            this.cart.forEach(item => {
              if (item.checked === true) {
                // 设置复选框为未选中状态
                item.checked = false;
              }
            });
          }).catch(error => {
            console.log(error);
          });

        } else {
          this.$message({
            type: 'error',
            message: '余额不足，请到个人中心界面充值后再进行结算！'
          });
          return;
        }
      } else {
        this.$message({
          type: 'error',
          message: '请至少选择一个商品进行结算！'
        });
        return;
      }
    },

    openQQ() {
      window.open("https://wpa.qq.com/msgrd?v=3&uin=2812584440&site=qq&menu=yes");
    }
    ,
    //获取用户信息
    getUsers() {
      const user = localStorage.getItem('userinfo');
      this.$axios.get("http://localhost:3000/users").then(res => {
        this.res = res.data; // 将获取到的用户数据赋值给resinfo
        //console.log("users");
        //console.log(this.res);
        // 遍历resinfo数组，找到account等于user的数据
        for (let i = 0; i < this.res.length; i++) {
          if (this.res[i].account === user) {
            this.userInfo = this.res[i]; // 将匹配到的数据存入userInfo对象
            break;
          }
        }
      })
        .catch(error => {
          console.log(error);
        })
    },

  },


};  
</script>

<style>
.margin {
  margin: 10px 0px;
}

.el-tabs__nav-scroll {
  margin-left: 16.7%;
}

.tag-left {
  margin-right: 240px;
}

.footer {
  padding: 25px;
  background-color: #f5f7fa;
  color: #333;
  text-align: center;
}

.copy-right {
  font-size: 14px;
}


.cart-s {
  transition: box-shadow 0.8s ease;
}

.cart-s:hover {
  box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
  cursor: pointer;
}

.cart-s img:hover {
  transform: rotate(5deg);
  transition: transform 1.5s ease;
}

@keyframes fly-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.all-right {
  opacity: 0;
  animation: fly-in 1.5s ease forwards;
}


@keyframes fly-in2 {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.all-left {
  opacity: 0;
  animation: fly-in2 1.5s ease forwards;
}
</style>